<template>
  <div id="app">
    <h1>vue工具组件封装</h1>
    <el-tag
      v-for="item in tags"
      :key="item.id"
      size="small"
      :type="item.id == activeTag ? 'success' : 'info'"
      style="margin: 10px"
      @click="tagClick(item)"
      >{{ item.name }}</el-tag
    >
    <br />
    <div v-if="activeTag == '1'">
      <HelloWorld />
    </div>

    <div v-if="activeTag == '2'">
      <MyDatePickerDemo />
    </div>

    <div v-if="activeTag == '3'">
      <MyMixins />
    </div>

  </div>
</template>

<script>

import HelloWorld from "@/components/HelloWorld.vue";

import MyDatePickerDemo from "@/test/date/MyDatePickerCss.vue";

import MyMixins from "@/test/mixins/MyMixins.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    MyDatePickerDemo,
    MyMixins,
  },
  data() {
    return {
      tags: [
        { id: "1", name: "HelloWorld" },
        { id: "2", name: "日期组件" },
        { id: "3", name: "MyMixins" },
      ],
      activeTag: "2",
    };
  },
  created() {
  },
  methods: {
    tagClick(e) {
      console.log(JSON.stringify(e));
      this.activeTag = e.id;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-tag:hover {
  cursor: pointer;
}

.div {
  /* width: 300px; */
  /* margin: 10px auto; */
}

</style>
